<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>广告详情</title>
    <head th:insert="~{admin/import :: layui-ADES}"></head>

    <style type="text/css">
        .layui-table > tr {
            text-align: center;
        }
    </style>
</head>

<body>
<fieldset class="layui-elem-field layui-field-title"
          style="margin-top: 20px;">
    <legend>编辑广告详情</legend>
</fieldset>

<form class="layui-form layui-form-pane" action="/admin/ad/saveAd"
      enctype="multipart/form-data" style="width: 55%; float: left;">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">广告名称</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="name" autocomplete="off"
                       class="layui-input" value=""/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">账号名称</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="adname" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">github名称</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="githubName" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">github主页</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="githubUrl" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">码云名称</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="giteeName" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">码云主页</label>
            <div class="layui-input-inline" style="width: 226px">
                <input type="text" name="giteeUrl" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">广告类型</label>
            <div class="layui-input-inline" id="subject" style="width: 226px">
                <select name="type">
                    <option value="">请选择广告类型</option>
                    <option value="1">普通广告</option>
                    <option value="2">社区管理员</option>
                    <option value="-1">禁言</option>
                </select>
            </div>
        </div>
    </div>


<br><br>
    <div class="layui-form-item layui-form-text" id="adBio">
        <label class="layui-form-label">广告简介</label>
        <div class="layui-input-block" id="editor">
            <p id="bio"></p>
        </div>
    </div>

    <div class="layui-form-item">
        <div style="text-align: center;">
            <input type="hidden" name="avatarUrl"/>
            <input type="hidden" name="id" th:value="${adId}"/>
            <input type="hidden" name="type" value="1"/>
            <input type="hidden" name="githubAccountId"/>
            <input type="hidden" name="giteeAccountId"/>
            <input type="hidden" name="githubAvatarUrl"/>
            <input type="hidden" name="giteeAvatarUrl"/>
            <input type="hidden" name="followCount"/>
            <div style="display:none;" >
                <textarea name="bio"></textarea>
            </div>
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<form class="layui-form layui-form-pane" enctype="multipart/form-data"
      style="float: right; padding-left: 1rem; text-align: center; width: 40%;">

    <div class="layui-form-item">
        <button type="button" class="layui-btn" id="img">
            <i class="layui-icon">&#xe67c;</i>点击上传，或将文件拖拽到此处
        </button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
        </div>
    </div>
</form>

<script src="/plugins/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="/wangEditor-3.1.0/release/wangEditor.js"></script>
<script>
    var E = window.wangEditor
    var editor = new E('#editor');
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/file/uploadEditor';
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示广告放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        }

    };
    editor.create();


    layui.config({
        base: '/build/js/',
        version: '1.0.1'
    }).use(['jquery', 'form', 'layedit', 'laydate', 'element', 'upload'], function () {
        var form = layui.form
            , $ = layui.$
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , upload = layui.upload;

        var adId = $("input[name='id']").val();
        if (adId != null && adId != "") {
            $.ajax({
                url: '/admin/ad/searchAdDetail',
                data: {'id': adId},
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 200) {
                        var ad = res.data;
                        $("input[name='name']").val(ad.name);
                        $("input[name='avatarUrl']").val(ad.avatarUrl);
                        $("input[name='adname']").val(ad.adname);
                        $("input[name='githubAccountId']").val(ad.githubAccountId);
                        $("input[name='giteeAccountId']").val(ad.giteeAccountId);
                        $("input[name='followCount']").val(ad.followCount);
                        $("input[name='githubUrl']").val(ad.githubUrl);
                        $("input[name='githubName']").val(ad.githubName);
                        $("input[name='giteeName']").val(ad.giteeName);
                        $("input[name='giteeUrl']").val(ad.giteeUrl);
                        $("input[name='githubAvatarUrl']").val(ad.githubAvatarUrl);
                        $("input[name='giteeAvatarUrl']").val(ad.giteeAvatarUrl);
                        $("select[name='type']").val(ad.type);
                        $("#bio").html(ad.bio);
                        $("textarea[name='bio']").val(ad.bio);
                        $("#demo1").attr("src", ad.avatarUrl).css("max-width", "350px").css("max-height", "300px");

                        form.render();
                    } else {
                        layer.msg(res.message);
                    }
                },
                error: function () {
                    layer.msg("广告信息编辑异常");
                }
            })
        }


        //广告类型为1-教师时，id为teacherDesc显示
        // $(".layui-unselect layui-form-select").click(function(){
        //     if($("select[name='ad_type']").val() == '1'){
        //         $("#teacherDesc").show();
        //         $("#subject").show();
        //     }else{
        //         $("#teacherDesc").hide();
        //         $("#subject").hide();
        //     }
        // });

        //图片上传
        //执行实例
        var uploadInst = upload.render({
            elem: '#img' //绑定元素
            , url: '/file/uploadFile' //上传接口
            , data: {'business': 'admanager'}
            , accept: 'images'
            , done: function (res) {
                //上传完毕回调
                $('#demo1').attr('src', res.url).css("max-width", "350px").css("max-height", "300px");
                $('input[name="avatarUrl"]').val(res.url);
                layer.msg(res.message);
            }
            , error: function () {
                //请求异常回调
                layer.msg(res.message);
            }
        });


        //日期
        laydate.render({
            elem: '#startTime'
            , type: 'datetime'
            , min: '2018-1-1'
            , max: '2099-12-31'
        });
        laydate.render({
            elem: '#endTime'
            , type: 'datetime'
            , min: '2018-1-1'
            , max: '2099-12-31'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        form.on('select(demo2)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });

        //自定义验证规则
        form.verify({
            ad_name: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '广告名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '广告名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '广告名不能全为数字';
                }
            },
            telephone: function (value) {
                if (value.length != 11) {
                    return '手机格式不标准';
                }
                if(!(/^\d+\d+\d$/.test(value))){
                    return '手机号只能为正整数';
                }
                var msg;
                // $.ajax({
                //     "async": false,
                //     "url": "/ad?method=checkTelephone",
                //     "data": {
                //         "telephone": value
                //     },
                //     "type": "POST",
                //     "dataType": "json",
                //     "success": function(data) {
                //         if(data.code != 0) {
                //             msg = data.msg;
                //         }
                //     }
                // });
                return msg;
            }
        });

        $(".layui-btn").mousedown(function(){
            $("textarea[name='bio']").val(editor.txt.html());
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
             $.post('/admin/ad/saveAd', data.field, function (res) {
                 if (res.code == 0) {
                     layer.msg(res.message);
                     setTimeout("window.location.href = '/admin/ad/list'", 1000);
                 } else {
                     layer.msg(res.message);
                 }
             }, 'json');
            return false;
        });

    });
</script>

</body>


</html>